<template>
  <section>

    <el-row style="float: right">
      <el-button size="mini" type="primary" @click="createLearnerBtn">新建学员</el-button>
      <el-button size="mini" type="text" @click="loadLearnerBtn" v-if="course">从任务中导入</el-button>
    </el-row>

    <el-table :data="learnerList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="姓名" prop="customerName"/>
      <!--<el-table-column label="课程" prop="data.courseTitle" >      </el-table-column>-->
      <el-table-column v-for="p in periods" :key="p.id" :label="p.title"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click='delLearnerBtn(scope)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="loadLearnerDialog" :title="course.title" v-if="loadLearnerDialog">
      <load-learner-by-job v-if="loadLearnerDialog" :course="course" v-on:confirmLoad="confirmLoadBtn"></load-learner-by-job>
    </el-dialog>
    <el-dialog :visible.sync="editLearnerDialog" :title="course.title + currLearner.name" v-if="editLearnerDialog">
      <new-learner v-if="editLearnerDialog" :currLearner="currLearner" v-on:confirm="confirmBtn"></new-learner>
    </el-dialog>
  </section>
</template>

<script>
  import newLearner from './newLearner'
  import loadLearnerByJob from './loadLearnerByJob'
  import dateFormater from '@/common/date-formater'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import errHandler from '@/assets/errHandler.js'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "learnerList",
    components: {newLearner, loadLearnerByJob},
    props:['course'],
    data() {
      return {
        learnerList:null,
        editLearnerDialog:false,
        loadLearnerDialog:false,
        currLearner:{},
        periods:null
      }
    },
    created(){
      console.log(this.course)
      if(this.course){
        this.learnerList=this.course.learners
        this.periods=this.course.periods
        return
      }
      this.getLearnerList()
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getLearnerList(pageNo){
        this.fetch({name:"getLearnerList",data:{page:pageNo? pageNo:0}})
          .then(res=>{
            console.log(res.content)
            this.learnerList = res.content
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createLearnerBtn(){
        this.currLearner={
          customerId:null,
          data:{ps:''}
        }
        this.editLearnerDialog=true
      },
      confirmBtn(e){
        console.log(e)
        if(e.id){
          //保存
          this.updateLearner(e)
        }else {
          //新建
          this.createLearner(e)
        }
      },
      createLearner(e){
        this.fetch({name:"createLearner",data:{...e,courseId:this.course.id}})
          .then(res=>{
            this.learnerList.push(res)
            this.editLearnerDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateLearner(e){
        this.fetch({name:"updateLearner",data:{...e}})
          .then(res=>{
            console.log(res)
            this.editLearnerDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      loadLearnerBtn(){
        this.loadLearnerDialog=true
      },
      editBtn(row){
        console.log(row)
        this.currLearner=row
        this.editLearnerDialog=true
      },
      delLearnerBtn(scope){

      },
      confirmLoadBtn(e){
        this.createLearnerByJob(e.id)
      },
      createLearnerByJob(jobId){
        this.fetch({name:"createLearnerByJob",data:{jobId}})
          .then(res=>{
            console.log(res)
            this.$message({message: '导入成功！',type: 'success'})
            this.loadLearnerDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
